<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
</head>
<body>
<div id="hei">
<!--  以下是v-for列表渲染-->
  <div v-for="ie in supList">
    <div v-if="ie.page<30"
         :class="['active','add',{'anthor':'ie.pname<30'}]"
        :style="styleidea">
      小于二十的员工有{{ie.pname}}
    </div>
    <div v-if="ie.page>20">
      大于二十的员工有{{ie.pname}}
    </div>
    </div>
  <div v-for="dd in list">
{{dd}}
  </div>
<div v-for="idem in supList">{{idem.pname}}</div>
<div v-for="idem in supList">{{idem.page}}</div>
<!--  以下是v-if v-else v-else-if  v-show -->
  <div v-if="count > 0">
  count>0 ，count的值是：{{count}}
  </div>
  <div v-else-if="count = 0">
    count等于零 ，count的值是：{{count}}
  </div>
  <div v-else="count < 0">
    count小于零 ，count的值是：{{count}}
  </div>
  <div v-show="count == 3">show:{{count}}</div>
</div>

<script>
   new Vue({
     el:'#hei',
     data:{

       styleidea:{
         color:'red',
         textShadow:'0 0 5px greeen'
       },
       count:'3',
       list:[1,2,3,4,5],
       supList:[{
         pname:'小明',
         page:'20'
       },{
         pname:'东桥',
         page:'30'
       },{
         pname:'城西',
         page:'40'
       },{
         pname:'黎明',
         page:'50'
       }]
     },
   })
</script>
</body>
</html>
